<html>
<body>
  
</body>
<script src="d3/d3.v3.js"></script>
<script>
//svg的宽度和高度
   var w = 500;
   var h = 300;
   var padding = 30;
   //初始化数据点
   var dataset = [];
   var numDataPoints = 15;
   //x轴最大的数值
   var xRange = Math.random() * 1000;
   //y轴最大的数值
   var yRange = Math.random() * 1000;
   for (var i = 0; i < numDataPoints; i++) {
    var newNumber1 = Math.floor(Math.random() * xRange);
    var newNumber2 = Math.floor(Math.random() * yRange);
    dataset.push([newNumber1, newNumber2]);
   }
   //创建刻度尺
   var xScale = d3.scale.linear()
         .domain([0, d3.max(dataset, function(d) { return d[0]; })])
         .range([padding, w - padding * 2]);
   var yScale = d3.scale.linear()
         .domain([0, d3.max(dataset, function(d) { return d[1]; })])
         .range([h - padding, padding]);
   var rScale = d3.scale.linear()
         .domain([0, d3.max(dataset, function(d) { return d[1]; })])
         .range([2, 5]);
   //定义x轴
   var xAxis = d3.svg.axis()
         .scale(xScale)
         .orient("bottom")
         .ticks(5);
   //定义y轴
   var yAxis = d3.svg.axis()
         .scale(yScale)
         .orient("left")
         .ticks(5);
   //创建svg元素
   var svg = d3.select("body")
      .append("svg")
      .attr("width", w)
      .attr("height", h);
   //创建圆形
   svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
        return xScale(d[0]);
      })
      .attr("cy", function(d) {
        return yScale(d[1]);
      })
      .attr("r", function(d) {
        return rScale(d[1]);
      });
   //创建标签
   svg.selectAll("text")
      .data(dataset)
      .enter()
      .append("text")
      .text(function(d) {
        return d[0] + "," + d[1];
      })
      .attr("x", function(d) {
        return xScale(d[0]);
      })
      .attr("y", function(d) {
        return yScale(d[1]);
      })
      .attr("font-family", "sans-serif")
      .attr("font-size", "11px")
      .attr("fill", "red");
   
   //将x轴追加到g元素中
   svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (h - padding) + ")")
    .call(xAxis);
   
   //将y轴追加到g元素中
   svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);
</script>
</html>